<!DOCTYPE html>
<html>
    <head>
        <title>hash router</title>
    </head>
    <body>
        <h1 id="id">hash router</h1>
        <a href="#/id1">id1</a>
        <a href="#/id2">id2</a>
        <a href="#/id3">id3</a>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    
    <script type="module">
        import demo1 from './demo1.js'
        console.log("wat");
        //试着自己写一个观察者模式
        //其实也就是事件监听
        //理一下观察者模式的思路
        //就是事件来了的时候根据对应的事件内容去调用回调函数
        //需要一个对象去存储事件值-事件回调函数
        class newRouter{
            constructor(){
                this.routes = {};
                this.currentUrl = '';
            }
            route(path, callback= () => {}){
                this.routes[path] = callback;
            }
            refresh(){
                this.currentUrl = location.hash.slice(1) || '/';
                //这种写法，利用短路性质来做判断
                this.routes[this.currentUrl] && this.routes[this.currentUrl]()
            }
            //添加事件监听函数
            init(){
                //注意这里用的是bind，还只能用bind，bind返回的是钩子，而事件监听函数需要的也是钩子
                window.addEventListener('load', this.refresh.bind(this), false);
                //location 对象相关的一个事件
                window.addEventListener('hashchange', this.refresh.bind(this),false);
            }
        }

        window.Router = new newRouter();
        window.Router.init();
        let content = document.querySelector('#id');
        //前面不需要加window了，默认就是
        Router.route('/id1', ()=>{
            console.log("in id1");
            content.innerHTML = 'id1';
        });
        Router.route('/id2', () =>{
            content.innerHTML = demo1;
        });
        Router.route('id3', ()=>{
            $.ajax({
                url: './demo2.html',
                success: (res) =>{
                    console.log("success");
                    content.innerHTML = res;
                }
            })
        });

    </script>
</html>